<template>
  <div>
    我生成的二维码：<img v-if="qrCodeUrl" :src="qrCodeUrl" alt="生成的二维码">
  </div>
</template>
<script>
import { ref } from 'vue'; // 引入Vue的ref函数
import QRCode from 'qrcode'; // 引入qrcode库 userid 后端查询图片  返回前端  展示
export default {
  setup() {
    // 创建响应式数据qrCodeUrl
    const qrCodeUrl = ref('');
    // 生成二维码
    const generateQRCode = () => {
      // 调用qrcode库的toDataURL方法生成二维码图片的Base64编码   B工程
      QRCode.toDataURL(`http://192.168.1.57:8080/Test/111222`)
          // 成功生成二维码
          .then(url => {
            qrCodeUrl.value = url;
          })
          // 生成二维码出错
          .catch(err => {
            console.error('生成二维码出错:', err);
          });
    };
    // 调用生成二维码的方法
    generateQRCode();
    // 返回响应式数据qrCodeUrl和生成二维码的方法generateQRCode
    return {
      qrCodeUrl,
      generateQRCode
    };
  }
};
</script>


<!--<template>-->
<!--  <div>-->
<!--    <input type="text" v-model="text" placeholder="输入要生成二维码的内容">-->
<!--    <button @click="generateQRCode">生成二维码</button>-->
<!--    <img v-if="qrCodeUrl" :src="qrCodeUrl" alt="生成的二维码">-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--import { ref } from 'vue';-->
<!--import QRCode from 'qrcode';-->
<!--export default {-->
<!--  setup() {-->
<!--    const text = ref('');-->
<!--    const qrCodeUrl = ref('');-->
<!--    const generateQRCode = () => {-->
<!--      QRCode.toDataURL(text.value)-->
<!--          .then(url => {-->
<!--            qrCodeUrl.value = url;-->
<!--          })-->
<!--          .catch(err => {-->
<!--            console.error('生成二维码出错:', err);-->
<!--          });-->
<!--    };-->
<!--    return {-->
<!--      text,-->
<!--      qrCodeUrl,-->
<!--      generateQRCode-->
<!--    };-->
<!--  }-->
<!--};-->
<!--</script>-->